<template>
  <a-card :bordered="false">
    <a-form
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item
        label="banner名称"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入banner名称!' }]}
          ]"
          placeholder="请输入banner名称..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="banner序号"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'serial',
            {rules: [{ required: true, message: '请输入banner序号!' }]}
          ]"
          placeholder="请输入banner序号..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="上传banner"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-upload
          name="avatar"
          listType="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :beforeUpload="beforeUpload"
          @change="uploadImg"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="width:100px" />
          <div v-else>
            <a-icon :type="imgLoading ? 'loading' : 'plus'"></a-icon>
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 12, offset: 9 }"
      >
        <a-button
          type="primary"
          html-type="submit"
        >
          保存
        </a-button>
      </a-form-item>
    </a-form>

  </a-card>
</template>

<script>
const getBase64 = (img, callback) => {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

export default {
  name: 'TableList',
  components: {
  },
  data () {
    return {
      imgLoading: false,
      imageUrl: ''
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
        }
      })
    },
    uploadImg: function (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload: function(file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    }

  }
}
</script>
